<template>
	<view>
		<view class="coupon">
			<view class="top-box z-flex-x-s-a" v-if="goods === ''">
				<!-- <van-tabs active="{{ active }}" color='#62CB81' bind:change="onChange">
		      <van-tab title="未使用" name="0">
		      </van-tab>
		      <van-tab title="已使用" name="1">
		      </van-tab>
		      <van-tab title="已过期" name="-1">
		      </van-tab>
		    </van-tabs> -->
				<u-tabs
					v-if="cate.length > 1"
					:list="cate"
					keyName="name"
					lineWidth="20"
					lineColor="#EDF1F4"
					@change="onChange"
					:activeStyle="{
						color: '#62CB81',
						fontWeight: 'bold'
					}"
					:inactiveStyle="{
						color: '#A4A9B7',
						transform: 'scale(1)'
					}"
					itemStyle="padding-left: 30px; padding-right:30px; height: 34px;margin-top:12rpx;"
				></u-tabs>
			</view>
			<view class="main-box">
				<scroll-view scroll-y="true" class="scroll-box z-padding-32" :show-scrollbar="false" enhanced="true" @scrolltolower="more">
					<block v-for="(item, index) in list">
						<coupon :info="item" :type="2" :goods="goods" @couponTap="couponTap"></coupon>
					</block>
					<!-- <van-empty description="暂无优惠券" v-if="{{finish && list.length === 0}}" /> -->
					<u-empty v-if="finish && list.length === 0" mode="" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import http from '../../utils/http';
import coupon from '@/component/coupon.vue';
export default {
	components: {
		coupon
	},
	data() {
		return {
			active: 0,
			state: 0,
			list: [],
			finish: false,
			loading: false,
			page: 1,
			goods: '',
			cate: [
				{ id: '0', name: '未使用' },
				{ id: '1', name: '已使用' },
				{ id: '-1', name: '已过期' }
			]
		};
	},
	methods: {
		couponTap(e) {
			console.log(e, '???');
			if (this.goods) {
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('selectCoupon', e);
				this.util.back();
			} else if (e.type == 2) {
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		},
		onChange(e) {
			console.log(e)
			this.state = e.id;
			this.reload();
		},
		reload() {
			(this.list = []), (this.page = 1), (this.finish = false);
			this.getList();
		},
		more() {
			this.page = ++this.page;
			this.getList();
		},
		getList() {
			if (this.finish) {
				return;
			}
			if (this.loading) {
				return;
			}
			this.loading = true;
			http.get('coupon/usercoupon', {
				page: this.page,
				state: this.state
			})
				.then((res) => {
					if (res.data.length === 0) {
						this.finish = true;
					}
					let arr = this.list.concat(res.data);
					this.list = arr;
				})
				.finally((res) => {
					this.loading = false;
				});
		}
	},
	onLoad(options) {
		this.goods = options.goods_id ? options : '';
		this.reload();
	}
};
</script>

<style>
page {
	background-color: #edf1f4;
}
.coupon {
	height: 100vh;
	/* #ifdef H5 */
	height: calc(100vh - 90rpx);
	/* #endif */
	display: flex;
	flex-direction: column;
}
.top-box {
	flex-shrink: 0;
}

.main-box {
	flex: 1;
	overflow: hidden;
}

.scroll-box {
	height: 100%;
	box-sizing: border-box;
}
</style>
